<template>
    <div class="container">
        <me-scroll ref="mescroll" :down="meScrollDown" :up="meScrollUp" @init="meScrollInit">
            <car-card :carInfo="item" v-for="item in arrList" :key="item.key"/>
        </me-scroll>
    </div>
</template>

<script>
    import webp from '@/mock/webp'
    import MeScroll from '@/components/MeScroll'
    import CarCard from './car-card'

    export default {
        components: {
            MeScroll,
            CarCard
        },
        data() {
            return {
                meScroll: null, // mescroll实例对象
                meScrollDown: {
                    callback: this.downCallback
                },
                meScrollUp: { // 上拉加载的配置.
                    callback: this.upCallback
                },
                arrList: []
            }
        },
        mounted() {
            this.arrList = webp.arrList;
        },
        methods: {
            // mescroll组件初始化的回调,可获取到mescroll对象
            meScrollInit(mescroll) {
                this.meScroll = mescroll;
            },
            downCallback() {
                this.meScroll.resetUpScroll();
            },
            upCallback(page) {
                this.arrList = this.arrList.concat(webp.arrList);
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.meScroll.endBySize(this.arrList.length, 20);
                    }, 600)
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100vh;
    }
</style>
